<template>
    <div class="tabbar">
        <div class="tabbar_left">
            <!-- 折叠图标 -->
            <el-icon style="margin-right: 10px;" @click="changeIcon">
                <component :is="LayOutSettingStore.fold ? 'Fold':'Expand'"></component><!-- 通过vue提供的动态组件，去动态加载icon -->
            </el-icon>
            <!-- 面包屑 -->
            <el-breadcrumb separator-icon="ArrowRight">
                <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
                    <span>{{ item.meta.title }}</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="tabbar_right">
            <el-button icon="Refresh" circle @click="updateRefsh" />
            <el-button icon="FullScreen" circle @click="fullScreen" />
            <el-button icon="Setting" circle />
            <img class="userPhoto" :src="userStore.avatar" />
            <!-- 下拉菜单 -->
            <el-dropdown>
                <span class="el-dropdown-link">
                    {{ userStore.username }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { setItem, getItem, delItem } from '@/utils/storage.js'
import { useRoute, useRouter } from 'vue-router'
// 获取layout配置相关仓库
import useLayOutSettingStore from '@/store/modules/setting'
let LayOutSettingStore = useLayOutSettingStore()
// 获取用户相关仓库
import useUserStore from '@/store/modules/user'
let userStore = useUserStore()
// 获取路由对象
let $route = useRoute()
// 获取路由器对象
let $router = useRouter()
// 点击折叠图标的方法
const changeIcon = () => {
    LayOutSettingStore.fold = !LayOutSettingStore.fold
}
console.log('【$route.matched】包含当前路由的所有嵌套路径片段的路由记录', $route.matched)
// 点击刷新按钮
const updateRefsh = () => {
    LayOutSettingStore.refsh = !LayOutSettingStore.refsh
}
// 全屏切换
const fullScreen = () => {
    // 判断当前的项目是否是全屏 是返回true，不是返回null
    let full  = document.fullscreenElement
    // 切换为全屏模式
    if(!full){
        document.documentElement.requestFullscreen() // 全屏显示
    }else{
        document.exitFullscreen() // 退出全屏
    }
}
// 退出登录
const logout = () => {
    userStore.userLogout() // 通知用户相关仓库，调用退出登录方法
    $router.push({
        path: '/login',
        query: {
            redirect: $route.path // 将当前路由路径带过去，实现在哪个页面退出，再登录，还是回到哪个页面的效果
        }
    })
}
// 组件命名
defineOptions({
    name: 'Tabbar'
})

// 获取用户名，头像
let username = ref(null)
username.value = getItem('USERNAME')
let avatar = ref(null)
avatar.value = getItem('AVATAR')
</script>

<style scoped lang="scss">
.tabbar{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .tabbar_left{
        display: flex;
        align-items: center;
        padding: 0 15px;
    }
    .tabbar_right{
        display: flex;
        align-items: center;
        padding: 0 15px;
        .userPhoto{
            width: 35px;
            height: 35px;
            border-radius: 100px;
            margin: 0 15px;
        }
        .el-dropdown-link {
            cursor: pointer;
        }
    }
}
</style>